<template>
	<div class="category-menu">
		<router-link
			:to="'/list/' + encodeURI(item)"
			v-for="(item, index) in typesList"
			:key="index"
			active-class="curr"
			exact-active-class="curr-e"
			exact
		>
			{{ item }}
		</router-link>
	</div>
</template>
<script>
// 导入请求方法
import { getTypeOne } from "@/api";
export default {
	name: "CategoryOne",
	data() {
		return {
			typesList: [], //数据初始值
		};
	},
	created() {
		// 页面加载的时候调用请求数据
		this.getTypes();
	},

	methods: {
		// 请求数据的方法
		async getTypes() {
			let result = await getTypeOne();
			// console.log(result);
			// 只要11个分类
			this.typesList.push(...result.slice(0, 12));
		},
	},
};
</script>
<style lang="scss">
@import "@/assets/scss/color";
.category-menu a {
	display: inline-block;
	padding: 5px 20px;
	margin: 15px 10px 15px 0;
	border-radius: 30px;
	&:hover,
	&.curr {
		background-color: $mainColor;
		color: #fff;
	}
}
</style>
